<template>
  <div id="STmain"></div>
</template>

<script>
import * as echarts from "echarts/core";
import { zhuti } from "@/assets/index.js";
import { TitleComponent, VisualMapComponent } from "echarts/components";
import { SunburstChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

export default {
  name: "TSratioComponents",
  data() {
    return {
      //各学院老师+学生人数
      college: [],
      TData: [],
      SData: [],
    };
  },
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(`/chaoxing/teasturatio/list`),
        method: "get",
      }).then((response) => {
        // console.log("学院师生比,", response);
        for (let index in response.data.data) {
          this.TData.push(response.data.data[index].teacher);
          this.SData.push(response.data.data[index].student);
          this.college.push(response.data.data[index].college);
        }
        this.initialize();
      });
    },
    initialize() {
      echarts.use([
        TitleComponent,
        VisualMapComponent,
        SunburstChart,
        CanvasRenderer,
      ]);

      var chartDom = document.getElementById("STmain");
      var myChart = echarts.init(chartDom, zhuti);
      var option;

      var data = [
        {
          name: this.college[0],
          children: [
            {
              name: this.college[0] + "教师",
              value: this.TData[0],
            },
            {
              name: this.college[0] + "学生",
              value: this.SData[0],
            },
          ],
        },
        {
          name: this.college[1],
          children: [
            {
              name: this.college[1] + "教师",
              value: this.TData[1],
            },
            {
              name: this.college[1] + "学生",
              value: this.SData[1],
            },
          ],
        },
        {
          name: this.college[2],
          children: [
            {
              name: this.college[2] + "教师",
              value: this.TData[2],
            },
            {
              name: this.college[2] + "学生",
              value: this.SData[2],
            },
          ],
        },
        {
          name: this.college[3],
          children: [
            {
              name: this.college[3] + "教师",
              value: this.TData[3],
            },
            {
              name: this.college[3] + "学生",
              value: this.SData[3],
            },
          ],
        },
        {
          name: this.college[4],
          children: [
            {
              name: this.college[4] + "教师",
              value: this.TData[4],
            },
            {
              name: this.college[4] + "学生",
              value: this.SData[4],
            },
          ],
        },
        {
          name: this.college[5],
          children: [
            {
              name: this.college[5] + "教师",
              value: this.TData[5],
            },
            {
              name: this.college[5] + "学生",
              value: this.SData[5],
            },
          ],
        },
      ];
      option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}",
        },
        visualMap: {
          type: "continuous",
          // 上下限
          min: 2000,
          max: 3000,
          inRange: {
            color: ["#2F93C8", "#AEC48F", "#FFDB5C", "#F98862"],
          },
        },
        series: {
          type: "sunburst",
          data: data,
          radius: [60, "85%"],
          itemStyle: {
            borderRadius: 7,
            borderWidth: 2,
          },
          label: {
            show: true,
          },
        },
      };

      option && myChart.setOption(option);
    },
  },
  created() {
    this.getInfo();
  },
  mounted() {},
};
</script>

<style scoped>
#STmain {
  width: 100%;
  height: 100%;

  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
</style>
